<template>
  <div>
    <!-- 分页查询 -->
    <el-row>
      <el-col :span="4">
        <el-input
          placeholder="档案号/姓名"
          type="text"
          style="width: 100%"
          v-model="name"
        />
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          style="width: 80%; margin-left: 16px"
          icon="el-icon-search"
          @click="page()"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="18"></el-col>
    </el-row>
    <hr />
    <el-table :data="list" border style="width: 100%;height=90%">
      <el-table-column prop="filenumber" label="档案号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : scope.row.sex == 2 ? "女" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="interposeclassify" label="状态">
        <template slot-scope="scope">
          {{ scope.row.interposeclassify == null ? "等待中" : "系统预分类" }}
        </template>
      </el-table-column>
      <el-table-column prop="interposeclassify.peopleclassify" label="人群分类">
        <template slot-scope="scope">
          {{
            scope.row.interposeclassify == null
              ? "未分类"
              : scope.row.interposeclassify.peopleclassify
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="user.fullname"
        label="健康管理师"
        width="180"
      >
        <template slot-scope="scope">
          {{
            scope.row.user.fullname == null
              ? ""
              : scope.row.user.fullname
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="loadADDUP(scope.$index, scope.row)"
            type="primary"
            :plain="scope.row.interposeclassify != null ? false : true"
            >{{
              scope.row.interposeclassify == null ? "确定分类" : "修改分类"
            }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="num"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- add update-->
    <el-dialog
      title="新增"
      style="text-align: left"
      :visible.sync="dialogFormVisibleAddUpdate"
    >
      <el-tabs
        v-model="addmenu"
        type="border-card"
        style="margin-top: -20px; height: 600px"
      >
        <el-tab-pane name="1" label="基本信息">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-row>
              <el-col :span="3" style="text-align: auto"
                ><strong>档案号:</strong></el-col
              >
              <el-col :span="3">{{ member.filenumber }}</el-col>
              <el-col :span="6" style="text-align: auto">.</el-col>

              <el-col :span="3" style="text-align: auto"
                ><strong>姓名:</strong></el-col
              >
              <el-col :span="3">{{ member.name }}</el-col>
              <el-col :span="6" style="text-align: auto">.</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3" style="text-align: auto"
                ><strong>性别:</strong></el-col
              >
              <el-col :span="3">
                {{ member.sex == 1 ? "男" : member.sex == 2 ? "女" : "" }}
              </el-col>
              <el-col :span="6" style="text-align: auto">.</el-col>

              <el-col :span="3" style="text-align: auto"
                ><strong>年龄:</strong></el-col
              >
              <el-col :span="3">
                {{ member.age }}
              </el-col>
              <el-col :span="6" style="text-align: auto">.</el-col>
            </el-row>
            <hr />
            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto"
                ><strong>疾病史:</strong></el-col
              >
              <el-col
                :span="22"
                style="
                  text-align: left;
                  height: 90px;
                  width: 90%;
                  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                "
              >
                {{ Membermedicalhistory.medicalhistory }}</el-col
              >
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto"
                ><strong>遗传史:</strong></el-col
              >
              <el-col
                :span="22"
                style="
                  text-align: left;
                  height: 90px;
                  width: 90%;
                  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                "
                >{{ Membermedicalhistory.familyhistory }}</el-col
              >
            </el-row>

            <el-row style="margin-top: 20px">
              <el-col :span="2" style="text-align: auto"
                ><strong>手术史:</strong></el-col
              >
              <el-col
                :span="22"
                style="
                  text-align: left;
                  height: 90px;
                  width: 90%;
                  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                "
                >{{ Membermedicalhistory.previoushistory }}</el-col
              >
            </el-row>
          </div>
          <br />
        </el-tab-pane>

        <el-tab-pane name="2" label="体检信息" style="height: 600px">
          <div style="margin-left: 50px; margin-top: 20px">
            <el-table :data="listcha" stripe style="width: 100%">
              <el-table-column
                prop="member.filenumber"
                label="档案号"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="examDate" label="体检日期" width="180">
              </el-table-column>
              <el-table-column prop="setmeal.name" label="体检套餐">
              </el-table-column>
              <el-table-column label="查看体检报告">
                <template slot-scope="scope">
                  <el-popover placement="right" trigger="click">
                    <div
                      class="demo-image__preview"
                      style="
                        margin-left: 20px;
                        margin-top: 20px;
                        width: 700px;
                        height: 800px;
                      "
                    >
                      <el-image style="width: 100%; height: 100%" :src="img">
                      </el-image>
                    </div>
                    <el-link
                      slot="reference"
                      @click="loadcha(scope.$index, scope.row)"
                      type="success"
                      >查看</el-link
                    >
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <br />
        </el-tab-pane>

        <el-tab-pane name="3" label="评估结果" style="height: 600px">
          <div style="margin-left: 50px; margin-top: 20px">
            <h5>体质评估</h5>
            <hr />
            <el-table :data="BodytypeCha" stripe style="width: 100%">
              <el-table-column prop="" label="档案号" width="200">
                {{ member.filenumber }}
              </el-table-column>
              <el-table-column prop="" label="姓名" width="200">
                {{ member.name }}
              </el-table-column>
              <el-table-column prop="createtime" label="评估日期" width="200">
              </el-table-column>
              <el-table-column label="查看评估报告">
                <template slot-scope="scope">
                  <el-popover placement="right" width="300" trigger="click">
                    <div style="margin-left: 20px; margin-top: 20px">
                      <el-row>
                        <el-col :span="12">阳虚体质 :</el-col>
                        <el-col :span="12">
                          {{ scope.row.yangquality == 0 ? "否" : "是" }}</el-col
                        >
                      </el-row>
                      <hr />
                      <el-row>
                        <el-col :span="12">阴虚体质 :</el-col>
                        <el-col :span="12">
                          {{
                            scope.row.yindeficiency == 0 ? "否" : "是"
                          }}</el-col
                        >
                      </el-row>
                      <hr />
                      <el-row>
                        <el-col :span="12">气虚体质 :</el-col>
                        <el-col :span="12">
                          {{ scope.row.yangquality == 0 ? "否" : "是" }}</el-col
                        >
                      </el-row>
                      <hr />
                    </div>
                    <el-link
                      slot="reference"
                      @click="loadpg(scope.$index, scope.row)"
                      type="success"
                      >查看</el-link
                    >
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div style="margin-left: 50px; margin-top: 30px">
            <h5>心理评估</h5>
            <hr />
            <el-table :data="MentalityresultCha" stripe style="width: 100%">
              <el-table-column prop="" label="档案号" width="200">
                {{ member.filenumber }}
              </el-table-column>
              <el-table-column prop="" label="姓名" width="200">
                {{ member.name }}
              </el-table-column>
              <el-table-column prop="createtime" label="评估日期" width="200">
              </el-table-column>
              <el-table-column label="查看评估报告">
                <template slot-scope="scope">
                  <el-popover placement="right" width="300" trigger="click">
                    <div style="margin-left: 20px; margin-top: 20px">
                      <el-row>
                        <el-col :span="12">强迫症 :</el-col>
                        <el-col :span="12">
                          {{ scope.row.ocd == 0 ? "否" : "是" }}</el-col
                        >
                      </el-row>
                      <hr />
                      <el-row>
                        <el-col :span="12">焦虑症 :</el-col>
                        <el-col :span="12">
                          {{ scope.row.anxiety == 0 ? "否" : "是" }}</el-col
                        >
                      </el-row>
                      <hr />
                      <el-row>
                        <el-col :span="12">恐怖化 :</el-col>
                        <el-col :span="12">
                          {{ scope.row.terror == 0 ? "否" : "是" }}</el-col
                        >
                      </el-row>
                      <hr />
                    </div>
                    <el-link
                      slot="reference"
                      @click="loadpg(scope.$index, scope.row)"
                      type="success"
                      >查看</el-link
                    >
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <br />
        </el-tab-pane>

        <el-tab-pane name="4" label="确定分类" style="height: 600px">
          <div style="margin-left: 50px; margin-top: 60px">
            <el-row>
              <el-col :span="4" style="text-align: auto"
                ><strong>确定分类:</strong></el-col
              >
              <el-col :span="20">
                <el-checkbox-group v-model="addjb">
                  <el-row
                    style="text-align: auto"
                    v-for="(item, index) in bqs"
                    :key="index"
                  >
                    <el-col :span="6">
                      <el-checkbox :label="item.yi"></el-checkbox>
                    </el-col>
                    <el-col :span="6">
                      <el-checkbox :label="item.er"></el-checkbox>
                    </el-col>
                    <el-col :span="6">
                      <el-checkbox :label="item.san"></el-checkbox>
                    </el-col>
                    <el-col :span="6">
                      <el-checkbox :label="item.si"></el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-col>
            </el-row>

            <el-row style="margin-top: 150px">
              <hr />
              <el-col :span="4" style="text-align: auto"
                ><strong>健康管理师:</strong></el-col
              >
              <el-col :span="14" style="text-align: left">
                <el-select disabled v-model="healthmgrid" clearable>
                  <el-option
                    :label="$store.state.user.fullname"
                    :value="$store.state.user.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">.</el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <br />
      <el-row style="text-align: right">
        <el-col :span="18">.</el-col>
        <el-col :span="5">
          <el-button
            @click="dialogFormVisibleAddUpdate = false"
            type="primary"
            plain
            >取消</el-button
          >
          <el-button
            style="margin-left: 20px; width: 40%"
            type="primary"
            @click="add()"
            >提交</el-button
          >
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页查询
      num: 1,
      size: 10,
      total: 2,
      list: [],
      name: "",

      // 确定分类
      dialogFormVisibleAddUpdate: false,
      addmenu: "1",
      bqs: [
        {
          yi: "阳虚",
          er: "阴虚",
          san: "气虚",
          si: "强迫症",
        },
        {
          yi: "焦虑症",
          er: "恐怖化",
          san: "糖尿病",
          si: "哮喘",
        },
        {
          yi: "肥胖症",
          er: "老年高血压",
          san: "高血压",
          si: "高血糖",
        },
      ],
      addjb: [],
      healthmgrid: this.$store.state.user.id,

      listcha: [],
      member: {},
      Membermedicalhistory: {},
      BodytypeCha: [],
      MentalityresultCha: [],
      img: "",
    };
  },
  methods: {
    // 分页查询
    handleSizeChange(val) {
      this.size = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.num = val;
      this.page();
    },
    page() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载数据中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .get("/rear/Interposeclassify/page", {
          params: { num: this.num, size: this.size, name: this.name.trim() },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
          loading.close();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          loading.close();
        });
    },

    // 确定分类
    loadADDUP(index, row) {
      this.dialogFormVisibleAddUpdate = true;
      this.addjb = [];
      this.member = row;
      this.axios
        .get("/rear/Interposeclassify/MembermedicalhistoryCha", {
          params: { id: row.filenumber },
        })
        .then((res) => {
          this.Membermedicalhistory = res.data;
        })
        .catch((res) => {
          console.log("服务器出现问题，请联系管理员！")
        });

      this.axios
        .get("/rear/Interposeclassify/tijian", {
          params: { name: row.filenumber },
        })
        .then((res) => {
          console.log(res.data)
          this.img = require("@/image/" + res.data[0].order.img);
          this.listcha = res.data;
        })
        .catch((res) => {
           console.log("服务器出现问题，请联系管理员！")
        });

      this.axios
        .get("/rear/Interposeclassify/BodytypeCha", {
          params: { id: row.filenumber },
        })
        .then((res) => {
          this.BodytypeCha = res.data;
        })
        .catch((res) => {
           console.log("服务器出现问题，请联系管理员！")
        });
      this.axios
        .get("/rear/Interposeclassify/MentalityresultCha", {
          params: { id: row.filenumber },
        })
        .then((res) => {
          this.MentalityresultCha = res.data;
        })
        .catch((res) => {
           console.log("服务器出现问题，请联系管理员！")
        });
    },
    add() {
      if (this.addjb < 1) {
        this.$message({
          message: "警告! 您至少选择一个症状 ！",
          type: "warning",
        });
        return;
      }
      if (this.healthmgrid == "") {
        this.$message({
          message: "警告! 您必须选择一个健康管理师 ！",
          type: "warning",
        });
        return;
      }
      let str = "";
      this.addjb.forEach((element) => {
        str += element + ",";
      });
      str = str.substring(0, str.length - 1);
      let params = {
        memberid: this.member.id,
        healthmgrid: this.healthmgrid,
        peopleclassify: str,
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .post("/rear/Interposeclassify/add", params)
        .then((res) => {
          loading.close();
          this.dialogFormVisibleAddUpdate = false;
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.page();
        })
        .catch((res) => {
          this.dialogFormVisibleAddUpdate = false;
          this.$message.error("服务器出现问题，请联系管理员！");
          loading.close();
        });
    },
    loadcha(index, row) {},
    loadpg(index, row) {},
  },
  created() {
    this.page();
  },
};
</script>

<style scoped>
</style>